<template>
  <div class="app-container">
    <FileUpload
      ref="fileUpload"
      :fileSize="fileSize"
      :value="fileList"
      :fileType="fileType"
      @input="uploadSuccess"
      @delete="deleteFile"
      @deleteNewFile="deleteNewFile"
      fileTypeParams="docs"
      :historyAttr="historyAttr"
      @getFileUrl="getFileUrl"
    ></FileUpload>
  </div>
</template>

<script>
import { deleteArticleFiles } from "@/api/content/article";
import { deepClone } from "@/utils";
export default {
  props: {
    articleForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
    attachment: {},
    newAttachment: {},
    historyAttr: {},
  },
  data() {
    return {
      fileType: [
        "doc",
        "docx",
        "wps",
        "xls",
        "xlsx",
        "xlt",
        "et",
        "ett",
        "ppt",
        "pptx",
        "zip",
        "rar",
        "pdf",
        "ceb",
        "txt",
        "dot",
        "wpt",
        "rtf",
        "dps",
        "dpt",
        "pot",
        "pps",
      ],
      fileSize: 200,
      id: null,
      fileList: [],

      fileListCache: [],
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.getConfigKey("sys.attach.file").then((res) => {
      this.fileSize = Number(res.msg) || 200;
    });
  },

  watch: {
    value: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
  },

  methods: {
    // <!-- 不要乱动文件删除 -->
    uploadSuccess(res) {
      let arr = JSON.parse(res);
      console.log("arr: ", arr);
      let a = deepClone(this.historyAttr);
      arr.map((item) => {
        // let obj =
        //   item.status == "success"
        //     ? {
        //         articleId: this.articleForm.articleId || null,
        //         id: null,
        //         realName: item.response?.realName || item.realName,
        //         sequence: null,
        //         storeName: item.response?.storeName || item.realName,
        //       }
        //     : {};

        item.articleId = this.articleForm.articleId || null;
        // a.push(item);
      });
      this.fileListCache = arr;
      this.$emit("update:newAttachment", arr);
    },
    // <!-- 不要乱动文件删除 -->
    deleteFile(ids, index) {
      deleteArticleFiles({
        type: "atta",
        ids: ids,
        articleId: this.articleForm.articleId || null,
      }).then((res) => {
        if (res.code == 200) {
          this.$refs.fileUpload.historyAttr.splice(index, 1);
          this.msgSuccess("文件删除成功");
          let a = deepClone(this.newAttachment);
          a.splice(index, 1);
          console.log("a: ", a);
          this.$emit("update:attachment", a);
        }
      });
    },
    // <!-- 不要乱动文件删除 -->
    deleteNewFile(index) {
      console.log("index: ", index);
      console.log("this.articleForm: ", this.articleForm);
      console.log("this.newAttachment: ", this.newAttachment);
      let a = deepClone(this.newAttachment);
      a.splice(index, 1);
      console.log("a: ", a);
      this.$emit("update:newAttachment", a);

      console.log("this.articleForm: ", this.articleForm);
    },
    //计算文件大小
    conver(limit) {
      if (!limit) return;
      var size = "";
      if (limit < 0.1 * 1024) {
        //如果小于0.1KB转化成B
        size = limit.toFixed(2) + "B";
      } else if (limit < 0.1 * 1024 * 1024) {
        //如果小于0.1MB转化成KB
        size = (limit / 1024).toFixed(2) + "KB";
      } else if (limit < 0.1 * 1024 * 1024 * 1024) {
        //如果小于0.1GB转化成MB
        size = (limit / (1024 * 1024)).toFixed(2) + "MB";
      } else {
        //其他转化成GB
        size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
      }

      var sizestr = size + "";
      var len = sizestr.indexOf(".");
      var dec = sizestr.substr(len + 1, 2);
      if (dec == "00") {
        //当小数点后为00时 去掉小数部分
        return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
      }
      return sizestr;
    },
    getFileUrl(file) {
      console.log("🚀 ~ file: file.vue ~ line 185 ~ getFileUrl ~ file", file);
      let arr = ["pdf"];
      let fileType = file.realName.split(".")[1];
      console.log(
        "🚀 ~ file: file.vue ~ line 188 ~ getFileUrl ~ fileType",
        fileType
      );
      let ip = this.articleForm.ip;
      let url = `${ip}/docs/${file.storeName}`;
      // console.log("🚀 ~ file: file.vue ~ line 190 ~ getFileUrl ~ url", url);
      // url =
      //   "http://192.168.1.28:13015/homepage/kt2/docs/2022/11/24/2cfc0f160ceb4556905c8d5417320917.pdf";
      let { href: pdfhref } = this.$router.resolve({
        path: "/pdf",
        query: {
          url: url,
        },
      });
      console.log(
        "🚀 ~ file: file.vue ~ line 203 ~ getFileUrl ~ pdfhref",
        pdfhref
      );
      let { href: wordhref } = this.$router.resolve({
        path: "/word",
        query: {
          url: url,
        },
      });
      if (["pdf"].includes(fileType)) {
        window.open(pdfhref, "_blank");
      } else if (["docx", "doc"].includes(fileType)) {
        window.open(wordhref, "_blank");
      }
    },
  },
};
</script>

<style scoped lang="scss">
// .upload-file-uploader {
//   margin-bottom: 5px;
// }
// .upload-file-list .el-upload-list__item {
//   border: 1px solid #e4e7ed;
//   height: 40px;
//   line-height: 2;
//   margin-bottom: 10px;
//   position: relative;
// }
// .upload-file-list .ele-upload-list__item-content {
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   color: inherit;
// }
// .ele-upload-list__item-content-action .el-link {
//   margin-right: 10px;
// }
</style>
